<template>
    <div class="chaTu">
        <div style="margin-left: 10px">
            <span class="peixun">培训期查询</span>
            <el-select v-model="pxname" placeholder="培训期查询" class="xiala" @change='Datawdaudai()'>
                <el-option
                    v-for="item in abc"
                    :key="item.c_id"
                    :label="item.c_name"
                    :value="item"
                />
            </el-select>
        </div>
        <div style="margin-left: 10px; display: flex; justify-content: space-between; textAlign: left; margin: 0;">
            <div ref="echartsDomTwo" style="width: 800px; height: 400px; display: inline-block;"></div>
            <div ref="echartsDom" style="width: 800px; height: 400px; display: inline-block;"></div>
        </div>
        
        <div style="width:80%; height: 40%; margin-left: 160px textAlign: 'left', margin: '0'" >
            <el-table
                :data="homeData"
                style="width: 100%; height:100%;"
                :row-class-name="tableRowClassName"
            >
                <el-table-column prop="upolice_id" label="警号"  />
                <el-table-column prop="uname" label="姓名" />
                <el-table-column prop="cname" label="培训期" />
                <el-table-column prop="ename" label="试卷" />
                <el-table-column prop="office_name" label="单位" width="180" />
                <el-table-column prop="score" label="成绩" width="180" />
                <el-table-column prop="re_type" label="考试" />
            </el-table>
        </div>
        <div><span> </span></div>
        <div>人数:&nbsp;&nbsp;&nbsp;{{pagesData}}</div>
        <div class="daohang">
        <div style="justify-content: center;; margin-top:50px;" >
            <el-pagination
                background
                @current-change="pagesChange"
                layout="prev, pager, next"
                :total="pagesData">
            </el-pagination>
            </div>
        </div>
    </div>
    </template>
    
    <script>
    import * as echarts from 'echarts';
    export default {
    name: '',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
        name: 'EChartsComponent',
        pagesData:0,
         data() {
          return {
            zuigao : [],
            zjidi: [],
            abc : [],
            cName: '',
            cid: '',
            pxname:[],
            shuju:'',
            bujigeData: [],
            jigeData:[],
            youxiuData:[],
            a_counts: [],
            name_listaaa: [],
            ChengJiData:[],
            homeData:[],
            formInline :{
                user: '',
                region: '',
                name: '',
                unit:'',
            },
            //标签页
            editableTabsValue: '2',
            editableTabs: [{
              title: '成绩统计',
              name: '1',
              content: 'Tab 1 content'
            }],
            tabIndex: 2,
            value: '',
            page:{
                size:10,
                pages:1,
            },
            cname_type:[]
          }
        },
        mounted(){
            this.$store.dispatch('Classinformation');
            this.getData()
            this.getChengji()
            this.getpeixunqi()
        },
        methods:{
        extension(chart) {
      // 注意这里，是以X轴显示内容过长为例，如果是y轴的话，需要把params.componentType == 'xAxis'改为yAxis
      // 判断是否创建过div框,如果创建过就不再创建了
      // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
      var elementDiv = document.getElementById('extension')
      if (!elementDiv) {
        var div = document.createElement('div')
        div.setAttribute('id', 'extension')
        div.style.display = 'block'
        document.querySelector('html').appendChild(div)
      }
      chart.on('mouseover', function (params) {
        if (params.componentType == 'xAxis') {
          var elementDiv = document.querySelector('#extension')
          //设置悬浮文本的位置以及样式
          var elementStyle =
            'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'
          elementDiv.style.cssText = elementStyle
          elementDiv.innerHTML = params.value
          document.querySelector('html').onmousemove = function (event) {
            var elementDiv = document.querySelector('#extension')
            var xx = event.pageX - 10
            var yy = event.pageY + 15
            console.log('22', xx)
            elementDiv.style.top = yy + 'px'
            elementDiv.style.left = xx + 'px'
          }
        }
      })
      chart.on('mouseout', function (params) {
        //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
        if (params.componentType == 'xAxis') {
          var elementDiv = document.querySelector('#extension')
 
          elementDiv.style.cssText = 'display:none'
        }
      })
    },
            getpeixunqi(){
                this.get('/class/').then(res=>{
                    if(res.code == 200){
                        this.abc  =  res.data
                    }
                   
                })
            },
            Datawdaudai(){
                console.log("****************")
                console.log( this.pxname )
                console.log("****************")
                this.cid = this.pxname.c_id
                this.cName = this.pxname.c_name
                this.getData()
                this.ChengJiData=[],
                this.getChengji()
            },
            getChengji(){
                this.get('/statistics/statisticsByClass').then(res=>{
                    this.ChengJiData = []
                    if(res.code == 200){
                        this.ChengJiData = res.data
                        this.$nextTick(() => {
                            this.adasfvdzsx();
                            this.oneTWO();
                        });
                    }else{
                        this.$router.push('/Login')
                    }
                })
            },
            pagesChange(val) {
                this.page.pages = val
                this.getData()
            },
            getData() {
                let param ={
                    office_name: this.formInline.unit,
                    re_type:this.examination, // 考试状态
                    uname: this.formInline.name,
                    ename: this.Exampaper,  // 试卷查询
                    cname: this.cName,
                    score_min: this.score_min,
                    score_max: this.score_max
                    
                }
                console.log('----cName值测试----')
                console.log(this.cName)
                this.post('/statistics/studentList?pageNo='+this.page.pages+'&c_name='+this.cName,param).then(res=>{
                    if(res.code == 200){
                        if(res.data.list.length != 0){
                            this.homeData = res.data.list
                            this.pagesData = res.data.total
                            this.cname_type = []
                            let senior = 1
                            let secondary = 1
                            let low = 1
                            res.data.list.forEach((item)=>{
                                if(item.score >= 30 && item.score <= 40){
                                    low += 1
                                }else if(item.score >= 40 && item.score <= 60){
                                    secondary += 1
                                }else if(item.score >= 60 && item.score <= 80){
                                    senior += 1
                                }
                            })
                            this.cname_type.push({
                                'name':res.data.list[0].cname,
                                'achievement':[senior,secondary,low],

                            })
                        }else{
                            this.homeData = []
                        }
                    }else{
                        this.$router.push('/Login')
                    }
                })
            },
            adasfvdzsx(){
                let chartBox = echarts.init(this.$refs.echartsDom) 
                let afjiswfas = []
                this.a_counts = []
                this.youxiuData = []
                this.jigeData = []
                this.bujigeData = []
                this.name_listaaa = []

                let name_list = []
                for(let k in this.ChengJiData){
                    afjiswfas.push({
                        'name': k,
                        'value': this.ChengJiData[k].avg_score,
                    })
                    name_list.push( k )
                    //总人数
                    this.a_counts.push(68)
                    //优秀人数
                    this.youxiuData.push(20)
                    //及格人数
                    this.jigeData.push(40)
                    //不及格人数                  
                    this.bujigeData.push(8)
                    //局字名前两字                 
                    this.name_listaaa.push(k)
                }
                
                let option = {
                title: {
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(data) {
              
                return (data['name']+"</br>"+ "</br>" + "平均分:" + data["value"]);
            }
                },
                label: {

                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 0,
                    top: 20,
                    bottom: 20,
                    data: name_list
                },
                series: [
                    {
                        name: '人数:',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: afjiswfas,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
                };
                chartBox.setOption(option);
            },
            oneTWO(){
                let gem = echarts.init(this.$refs.echartsDomTwo);
                let posList = [];
                    app.configParameters = {
                        rotate: {
                            min: -90,
                            max: 90
                        },
                        align: {
                            options: {
                                left: 'left',
                                center: 'center',
                                right: 'right'
                            }
                        },
                        verticalAlign: {
                            options: {
                                top: 'top',
                                middle: 'middle',
                                bottom: 'bottom'
                            }
                        },
                        position: {
                            options: posList.reduce(function (map, pos) {
                                map[pos] = pos;
                                return map;
                            }, {})
                        },
                        distance: {
                            min: 0,
                            max: 100
                        }
                    };
                    app.config = {
                        rotate: 90,
                        align: 'left',
                        verticalAlign: 'middle',
                        position: 'insideBottom',
                        distance: 15,
                        onChange: function () {
                            const labelOption = {
                            rotate: app.config.rotate,
                            align: app.config.align,
                            verticalAlign: app.config.verticalAlign,
                            position: app.config.position,
                            distance: app.config.distance
                            };
                            myChart.setOption({
                            series: [
                                {
                                    label: labelOption
                                },
                                {
                                    label: labelOption
                                },
                                {
                                    label: labelOption
                                },
                                {
                                    label: labelOption
                                }
                            ]
                            });
                        }
                    };
                    const labelOption = {
                        show: true,
                        position: app.config.position,
                        distance: app.config.distance,
                        align: app.config.align,
                        verticalAlign: app.config.verticalAlign,
                        rotate: app.config.rotate,
                        formatter: '{c}  {name|{a}}',
                        fontSize: 16,
                        rich: {
                            name: {}
                        }
                    };
                   let option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                            type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['总人数', '优秀人数', '及格人数', '未及格人数']
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            left: 'right',
                            top: 'center',
                            feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar', 'stack'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                            }
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisTick: { 
                                    alignWithLabel:false,
                                    show: false },
                                data: this.name_listaaa,
                                triggerEvent: true,
                                axisLabel: {
                                    color: 'black',//文字颜色
                                    //文字省略
                                    formatter: function(value){
                                        if (value.length > 3){
                                            return `${value.slice(0, 3)}`
                                        }
                                        return value;
                                    }
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '总人数',
                                type: 'bar',
                                barGap: 0,
           
                                emphasis: {
                                    focus: 'series'
                                },
                                data: this.a_counts
                            },
                            {
                                name: '优秀人数',
                                type: 'bar',

                                emphasis: {
                                    focus: 'series'
                                },
                                data: this.youxiuData
                            },
                            {
                                name: '及格人数',
                                type: 'bar',
                        
                                emphasis: {
                                    focus: 'series'
                                },
                                data: this.jigeData
                            },
                            {
                                name: '未及格人数',
                                type: 'bar',
    
                                emphasis: {
                                    focus: 'series'
                                },
                                data: this.bujigeData
                            }
                        ],
                    };

                    gem.setOption(option);
                    // 就是这个方法，解决放上提示全部
                    this.extension(gem)
                    gem.on('click', function (data) {
                    // 添加点击事件
                    })
                    
            },
        }
        
    }
    </script>
    
    <style scoped>
        .daohang{
                width: 50%; /* 或固定宽度 */
                margin-left: auto;
                margin-right: auto;
        }
        .peixun{
            margin-top: 50px;
        }
        .biaoqian{
    
        }
        .xiala{
            width:200px;
        }
        .chaTu{
            width:100%;
            height: 100%;
            background-color: white;
            padding-left:1px;
            float:left;
        }
    </style>